Web Senza Barriere 2008 L’Esperienza di Progettare Esperienze Utente Autori: Luca Mascaro, Emanuele Quintarelli ------------------------------ Agenda - Introduzione - User Experience - Alcuni Numeri su cui Riflettere - Un Processo Centrato sull’Utente - Nuove Tendenze - La User Experience del Futuro ------------------------------ Introduzione ------------------------------ Luca Mascaro ------------------------------ Emanuele Quintarelli ------------------------------ Perché parlare di User Experience? ------------------------------ User Experience ------------------------------ User Experience è la combinazione olistica di tutto ciò che un essere umano vede, tocca e prova interagendo con un prodotto o servizio ------------------------------ Le dimensioni della User Experience Ogni progetto di user experience è definito tramite tre dimensioni: il contesto e gli obiettivi di business, il target e le proprie esigenze nei confronti del servizio, le feature del servizi ed i contenuti che tramite esso vengono veicolati ------------------------------ Rapporto fra discipline ------------------------------ Obiettivo equilibrio Mantenere il corretto equilibrio, mediare ed armonizzare le richieste legate alle tre dimensioni della user experience è un lavoro spesso difficile ma necessario al raggiungimento degli obiettivi del cliente ed specialmente al soddisfacimento delle esigenze informative e comunicative del cliente. Ogni progetto è unico e presenta sfide e caratteristiche peculiari lungo ciascuno degli assi ------------------------------ Team Multidisciplinari Per portare a termine con successo un progetto di user experience è necessario coinvolgere figure e competenze diverse tra cui architetto dell'informazione, interaction designer, visual designer, usability engineer. In base all'esperienza ed al tipo di attività la stessa figura può incarnare diversi ruoli. L'aspetto più critico è il garantire la sincronizzazione del lavoro delle figure coinvolte, preservandone al contempo l'indipendenza ed il contributo specifico ------------------------------ Information architect ------------------------------ Interaction designer ------------------------------ Visual designer ------------------------------ Usability engineer ------------------------------ Altre figure che ruotano intorno alla UX - Business Analyst - Copy writer - Video editor - Project manager - Software developer - Search engine specialist ------------------------------- Struttura o talento? ------------------------------- Organizzazione del team di UX ------------------------------- Benefici e valore strategico - Colmare il gap tra mondo e bisogni informativi, di acquisto, comunicazione - Da un focus tecnologico ed estetico, ad uno funzionale e centrato sull'essere umano - Approccio sistematico alla comprensione e progettazione sull'utente - Esplicitazione, condivisione ed allineamento dei bisogni utente e degli obiettivi di business - Contributo essenziale nell'adozione dei servizi - Impatto sulla bottom line (conversione, frequenza di utilizzo, costi di training, costi di manutenzione, marketing, branding etc) -------------------------------- Più valore all’inizio I benefici derivanti da una progettazione centrata sull'utente seguono un andamento decrescente (simile alla long tail) rispetto al tempo. Più si procede lungo il processo, più le attività hanno impatti specifici su un singolo aspetto. Porre delle basi solide all'inizio, significa tracciare dei binari in grado di guidare l'intero progetto. Una buona comprensione del mercato, degli obiettivi di business e degli utenti sono certamente le attività con un impatto più alto sulla riuscita dell'iniziativa -------------------------------- I rischi di una UX negativa - Progettare per i progettisti - Mille ed una feature - Barriere verso l’uso, l’apprendimento, la memorizzazione, la soddisfazione - Barriere verso gli obiettivi di business - Frustrare gli utenti - Danneggiare il brand -------------------------------- Esempi di successo -------------------------------- Caso T-Mobile La schermata contenente la homepage della società di telecomunicazione T-Mobile è un buon esempio di priorizzazione dei contenuti e delle funzionalità centrali al raggiungimento degli obiettivi dell'utente. I contenuti più importanti (prezzo, aggiunta al carrello, etc) sono quelli più in evidenza. -------------------------------- Caso CircuitCity La schermata mostra la scheda prodotto per una macchina fotografica digitale. Anche qui i contenuti principali colpiscono immediatamente l'attenzione dell'utente tramite un uso attento del colore e degli spazi -------------------------------- Caso Dell La homepage del servizio di supporto sui prodotti di Dell è estramente semplice di leggere e comprendere, grazie alla distanza tra gli oggetti ed alla consistenza nell'aspetto grafico e nell'interazione -------------------------------- Esempi di Fallimento -------------------------------- Alcuni numeri su cui riflettere ------------------------------- Usabilità dei siti internazionali L'istogramma mostra come su 1001 siti esaminiti da Forrester Research nell'arco temporale che va dal Novembre 2009 all'Aprile 2007, il punteggio medio si attesta su 0.9 e solo 35 casi raggiungono la sufficienza (punteggio 25) ------------------------------- I 10 errori più frequenti Un'altra indagine di Forrester Research mostra come i dieci errori più frequenti siano: - Il testo è illegibile (83%) - Il sito non presenta una policy sulla privacy e sulla sicurezza adeguata (78%) - I flussi di navigazione sono inefficienti (70%) - L'uso degli spazi nei layout è inefficace (67%) - La ricerca basata su parole chiave non è completa e precisa (62%) - Le etichette per categorie e sottocategorie non sono chiari e mutuamente esclusive (60%) - Il sito non aiuta gli utenti a recuperare in caso di errore (59%) - Il nome delle categorie di primo livello non lascia prevedere le categorie di secondo livello in esse contenute (56%) - I contenuti essenziali non sono presenti dove servirebbero (54%) - Contenuti e funzionalità essenziali non hanno un'adeguata priorità nella pagina (51%) -------------------------------- Il tempo non cura tutti i mali Il diagramma mostra come, dopo un miglioramento dal 1999 al 2001. i progressi legati alla user experience nei 1001 siti analizzati da Forrester non siano sensibili durante gli ultimi 6 anni --------------------------------- 7 lezioni - Lo scenario design rimane l’ingrediente centrale per la progettazione ucd - Usabilità e review con esperti devono far partire del processo di sviluppo di ogni servizio - Scegliere ed utilizzare le personas giuste garantisce i migliori risultatis - Il ROI di un redesign focalizzato sugli utenti produce effetti fenomenali (>100% in 12 mesi) - Scegliere l’agenzia giusta fa la differenza (specialmente con il web 2.0) - Garantire l’usabilità è necessario, ma non sufficiente (utilità e desiderabilità del servizio) - Non esistono più scuse per una pessima user experience --------------------------------- Un processo centrato sull’utente --------------------------------- Un processo è un metodo sistematico per portare a termine attività complesse attraverso passi dettagliati ed ordinati logicamente, la cui sequenza deve essere rispettata per raggiungere un obiettivo --------------------------------- Processo struttura a fasi Il diagramma mostra la sequenza di fasi di un possibile processo di user experience. In ordine le fasi sono: - Discovery - Analysis - Design e Prototyping - Evaluation Esiste sempre una sovrapposizione tra le attività appartenenti a due fasi adiacenti. L'evaluation avviene in parte dopo l'analysis ed in parte dopo il design. Esista la possibilità di introdurre fasi aggiuntive in alcuni progetti ----------------------------------- Un processo è un modello astratto di orientamento che deve essere applicato alla pratica quotidiana (limitazioni di budget, tempistiche, risorse disponibili, tipologia di servizio) ---------------------------------- Processo per chiarire - Obiettivo singole attività - Motivazioni alla base delle sequenze - Interrelazioni tra attività apparentemente scollegate - Responsabilità e compiti di ogni figura professionale - Momenti di verifica ed approvazione con il cliente ---------------------------------- Benefici dell’adottare un processo - Maggiore qualità (best practice) - Meno errori (sistematicità) - Riduzione tempi di progettazione e realizzazione - Riduzione costi del progetto - Riduzione dei rischi di fallimento - Capitalizzazione esperienza acquisita ---------------------------------- Perché questo processo - Focus all’analisi - Flessibilità tra le fasi - Momenti di scambio - Non mischiare attività con fini diversi ---------------------------------- Discovery è la definizione degli obiettivi del progetto, dei vincoli esistenti, dei rischi di fallimento e stesura di un piano di massima ---------------------------------- Documento di vision ---------------------------------- Analysis è l'approfondimento delle dimensioni peculiari del progetto in termini di strategia di comunicazione e basi delle attività di progettazione ---------------------------------- Content Inventory L'immagine mostra un foglio excel utilizzato per l'inventario dei contenuti. Ogni documento è dotato di un codice identificato, di un titolo, un link ed alcune informazioni descrittive ---------------------------------- Personas Esempio di personaggio dotato di una foto, di un nome, età, città, occupazione, stile di vita, rapporto con internet ed obiettivi ---------------------------------- Scenarios Il personaggio viene portato in vita tramite una storia che ne narra l'esperienza di interazione con il servizio in un contesto specifico ---------------------------------- Design e Prototyping sono la definizione dell’identità generale e delle caratteristiche del servizio tra cui sistema di navigazione, mappa strutturale, categorizzazione dei contenuti, labeling, wireframe, prototipi XHTML ---------------------------------- Content categorization Il diagramma mostra una struttura ad albero che rappresenta l'organizzazione gerarchia e contestuale di tutte le pagine del servizio --------------------------------- Wireframe L'immagine mostra un esempio di wireframe (rappresentazione schematica) a bassa qualità della pagina --------------------------------- Visual L'immagine mostra un test di scelta delle palette cromatiche, in questo caso il rosso tiepido legato ad alcuni significati simbolico culturali --------------------------------- Durante l'evaluation i prototipi e wireframe vengono sottoposti a test e migliorati iterativamente tramite la partecipazione di utenti ed esperti --------------------------------- Test Utenti --------------------------------- Risultati dei test di usabilità I diagrammi mostrano esempi di tabelle (efficacia, efficienza, criticità) sui task svolti dagli utenti durante un test di usabilità -------------------------------- Ideation ed altre fasi/attività supplementari --------------------------------- Concept L'immagine mostra uno sketch per un prototipo di device mobile innovativo --------------------------------- Peculiarità del mercato italiano --------------------------------- Ma quanto mi costa? --------------------------------- Da dove partire? --------------------------------- Nuove tendenze --------------------------------- UX e Web 2.0 --------------------------------- Progettare per gruppi ed interazioni sociali --------------------------------- Progettare ecosistemi --------------------------------- Branding --------------------------------- La User Experience del futuro --------------------------------- Internet of things --------------------------------- Mobile UX --------------------------------- Georeferenziazione --------------------------------- Domande